<script setup>
const props = defineProps(['size'])
</script>

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="lucide lucide-audio-lines"
    :style="{fontSize: props.size}"
  >
    <path d="M2 10v3" class="audio-line audio-line-1" />
    <path d="M6 6v11" class="audio-line audio-line-2" />
    <path d="M10 3v18" class="audio-line audio-line-3" />
    <path d="M14 8v7" class="audio-line audio-line-4" />
    <path d="M18 5v13" class="audio-line audio-line-5" />
    <path d="M22 10v3" class="audio-line audio-line-6" />
  </svg>
</template>

<style scoped lang="scss">
  svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  .audio-line {
    transform-origin: center; /* 缩放原点设置为中间 */
    animation: audioWave 1s infinite ease-in-out;
  }

  .audio-line-1 { animation-delay: 0s; }
  .audio-line-2 { animation-delay: 0.1s; }
  .audio-line-3 { animation-delay: 0.2s; }
  .audio-line-4 { animation-delay: 0.3s; }
  .audio-line-5 { animation-delay: 0.4s; }
  .audio-line-6 { animation-delay: 0.5s; }

  @keyframes audioWave {
    0%, 100% {
      transform: scaleY(1); /* 初始高度 */
    }
    50% {
      transform: scaleY(0); /* 缩放到中间 */
    }
  }
</style>